import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ClipDemo extends StatelessWidget {
  final avatar = Image.asset(
    'images/card03.png',
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  );

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('剪裁示例'),
          centerTitle: true,
        ),
        // 滚动指示器（滚动条）
        body: Scrollbar(
          // 可滚动
          child: SingleChildScrollView(
            // 滚动方向，默认是垂直方向
            scrollDirection: Axis.vertical,
            // iOS下弹性效果
            physics: BouncingScrollPhysics(),
            // 是否按照相反的方向滑动
            reverse: false,
            // 否使用widget树中默认的PrimaryScrollController
            primary: true,
            child: Center(
              child: Column(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 20),
                    // 不剪裁
                    child: avatar,
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 20),
                    // 剪裁为圆形
                    child: ClipOval(child: avatar),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 20),
                    // 剪裁为圆角矩形
                    child: ClipRRect(
                        borderRadius: BorderRadius.circular(10), child: avatar),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Align(
                          alignment: Alignment.topLeft,
                          widthFactor: 0.5, //宽度设为原来宽度一半，另一半会溢出
                          child: avatar,
                        ),
                        Text('你好世界', style: TextStyle(color: Colors.black))
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        ClipRect(
                          child: Align(
                            alignment: Alignment.topLeft,
                            widthFactor: 0.5, //宽度设为原来宽度一半，另一半会溢出
                            child: avatar,
                          ),
                        ),
                        Text('你好世界', style: TextStyle(color: Colors.black))
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 20, bottom: 20),
                    color: Colors.red,
                    child: ClipRect(
                      clipper: _ClipCustom(),
                      child: avatar,
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      );
}

// 自定义剪裁区域
class _ClipCustom extends CustomClipper<Rect> {
  @override
  getClip(Size size) => Rect.fromLTWH(15, 20, 50, 40);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
